<template>
  <el-dialog v-model="visible" title="项目所属医院信息" width="800px" append-to-body draggable @close="cancel">
    <div class="hospital-info-container">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入医院名称进行搜索"
          clearable
          style="width: 300px"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
    <el-table :data="filteredHospitalList" stripe style="width: 100%">
      <el-table-column prop="itemName" label="项目名称" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="hospitalName" label="医院名称" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="price" label="价格(元)" align="center" width="120">
        <template #default="scope">
          <span class="price-text">¥{{ formatPrice(scope.row.price) }}</span>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { centsToYuan } from '@/utils/money'

// 定义 props
const props = defineProps({
  hospitalInfoVisible: {
    type: Boolean,
    default: false
  },
  hospitalInfoList: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['handleClose']);
const visible = ref(false);
watch(
  () => props.hospitalInfoVisible,
  (val) => {
    visible.value = val;
  }
);

// 响应式数据
const searchKeyword = ref('');

// 计算属性：过滤后的医院列表
const filteredHospitalList = computed(() => {
  if (!searchKeyword.value.trim()) {
    return props.hospitalInfoList;
  }
  
  return props.hospitalInfoList.filter(item => 
    item.hospitalName && item.hospitalName.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

// 价格格式化函数：分转元，最多保留两位小数
const formatPrice = (price) => centsToYuan(price);

const cancel = () => {
  visible.value = false;
  searchKeyword.value = '';
  emit('handleClose');
};

</script>

<style scoped lang="scss">
.hospital-info-container {
  padding: 20px;

  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    
  }

  .price-text {
    color: #f56c6c;
    font-weight: 600;
    font-size: 16px;
  }
}

:deep(.el-table) {
  .el-table__header {
    background-color: #f5f7fa;
  }
  
  .el-table__header th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
  }
  
  .el-table__row:hover {
    background-color: #f5f7fa;
  }
}
</style>